<template>
    <el-autocomplete
      v-model="searchKeyword"
      :fetch-suggestions="fetchSuggestions"
      placeholder="请输入商品名"
      @select="handleSelect"
    >
    </el-autocomplete>
    <el-button type="primary" @click="search">搜索</el-button>
  </template>
  
  <script>
  import { useProductStore } from '../stores/productStore';
  
  export default {
    data() {
      return {
        searchKeyword: '',
      };
    },
    methods: {
      async fetchSuggestions(queryString, callback) {
        const store = useProductStore();
        const suggestions = await store.searchProducts(queryString);
        callback(suggestions.map((item) => ({ value: item.Name, id: item.ProductID })));
      },
      handleSelect(item) {
        console.log('Selected Product ID:', item.id);
      },
      search() {
        console.log('Searching for:', this.searchKeyword);
      },
    },
  };
  </script>
  